除了定義好的效果之外，jQuery提供了一個可以完全自訂的函式animate()，看起來有點像是整合CSS@keyframes和animation，第一個值就是提供最後狀態(@keyframes的100%)的CSS數值，以Object{}包裝即可；而第二個值則是animation的時間，以毫秒為單位。

//指定my-button監聽click事件
$( "#my-button" ).click(function() {
//執行my-div元件的動畫
  $( "#my-div" ).animate({
    opacity: 0.25,
    width: "200px",
    height: "toggle"
  }, 3000);
});

animate()定義CSS狀態的物件為必要值，基本上CSS的屬性都能使用，像是width和height都能作為此Object的屬性；特別要注意的是，一次定義多個子屬性的屬性，如font、background在這裡無法使用；另外，若要使用font-size這樣有分隔線的屬性，也需要改成JavaScript的駝峰式命名fontSize，或是使用引號框'font-size'。

另外，數值的部分還提供了定義好的值：show、hide可以直接讓這個屬性從無到有、從有到無；而toggle值也如同其名，可以產生開關效果。

jQuery有效簡化JavaScript原生程式碼，並提供多樣的函式，能滿足多種不同的需求，但畢竟jQuery非專注於動態效果的Library，若希望選擇的Library是專門處理動態效果的部分的話，jQuery或許並非最合適的選擇；但反過來說，若專案其他層面已經應用了jQuery，且這裡提供的函式符合需求的話，那直接使用jQuery就相當合理。